<template>
  <div>
    <transition name="bounce">
      <div v-if="isShow">
        <div class="box"></div>
        <div class="main">
          <span class="close" @click="closeFn">X</span>
          <h1>{{title}}</h1>
          <div class="content">
            <slot name="content">内容</slot>
          </div>
          <div class="ipt">
            <slot name="ipt"></slot>
          </div>
          <div class="'btn">
            <slot name="btn"></slot>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: ["isShow", "title"],
  data() {
    return {};
  },
  methods: {
    closeFn() {
      this.$emit("update:isShow", false);
    },
  },
};
</script>

<style scoped>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
.box {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  position: fixed;
  top: 0;
  left: 0;
}

.main {
  height: 300px;
  width: 300px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.close {
  float: right;
  margin: 10px;
  cursor: pointer;
}

.btn {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>